<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>fetch</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <button @click="handleClick()">获取影片信息</button>
        <button @click="handlePost()">发起POST请求</button>
        <ul>
            <li v-for="data in datalist">
                <h3>{{data.name}}</h3>
                <img :src="data.poster" />
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                datalist: []
            },
            methods: {
                handleClick() {
                    // console.log("this=",this);//vue对象

                    fetch('./json/test.json')
                        .then((response) => {
                            return response.json();
                        })
                        .then((myJson) => {
                            console.log(myJson);
                            console.log("this=", this);
                            this.datalist = myJson.data.films
                        });
                },

                handlePost() {
                    fetch(
                        "https://www.httpbin.org/post",
                        {
                            // body: JSON.stringify({ username: "admin", password: "123456" }), // must match 'Content-Type' header
                            body: "username=admin&password=123456", // must match 'Content-Type' header
                            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                            credentials: 'same-origin', // include, same-origin, *omit
                            headers: {
                                'user-agent': 'Mozilla/4.0 MDN Example',
                                // 'content-type': 'application/json'
                                'content-type': 'application/x-www-form-urlencoded'
                            },
                            method: 'POST', // *GET, POST, PUT, DELETE, etc.
                            mode: 'cors', // no-cors, cors, *same-origin
                            redirect: 'follow', // manual, *follow, error
                            referrer: 'no-referrer', // *client, no-referrer
                        })
                        .then(response => response.json())
                        .then(data => console.log(data)) // JSON from `response.json()` call
                        .catch(error => console.error(error))
                }
            }
        })
    </script>

</body>

</html>